<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>量角器-test</title>
	<link href="../../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../../_assets/js/examples.js"></script>
	<script src="../../lib/easeljs-NEXT.js"></script>   
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->
	<script src="../../_assets/libs/preloadjs-NEXT.min.js"></script>

	<script id="editable">
		var update = true;
		var angleO1 = new Object();
		var angleO2 = new Object();
		var angle = 0;
		var angleCir;
		var timer = 1;
		var radius = 50;
		var counter = 1;
		var color=["firebrick","chocolate","coral","brown","blue","pink","greengyellow","indigo","green","orange"]


		function init() {

	        stage = new createjs.Stage("protractor");

	        w = stage.canvas.width;
	        h = stage.canvas.height;
	        stage.enableMouseOver(10);
	        manifest = [
		            {src: "del.png", id: "del"},//删除按钮
		            {src: "change.png", id: "change"},//伸缩按钮
		            {src: "rotate.png", id: "rotate"},//旋转按钮
		            {src: "check.png", id: "check"},//确定按钮
		            {src: "protractor.png", id: "protractor"},//量角器

			];


	        loader = new createjs.LoadQueue(false);
			loader.addEventListener("complete", handleComplete);
			loader.loadManifest(manifest, true, "images/");
    	}

    	function handleComplete() {
    		var rect = new createjs.Shape();
			rect.graphics.beginFill("white").drawRect(0, 0,1200,1200);

    		//量角器
	        var protractorImg = loader.getResult("protractor");
			protractor = new createjs.Shape();
			protractor.graphics.beginBitmapFill(protractorImg).drawRect(0, 0,protractorImg.width,protractorImg.height);
			protractor.x = 100;
			protractor.y = 100;
	        protractor.cursor = "pointer";

	        protractor.addEventListener("mousedown",function(evt){
				// var o = evt.target;
				// o.oldMouseX = evt.stageX;
				protractorContainer.offset={x:protractorContainer.x - evt.stageX,y:protractorContainer.y - evt.stageY};
				protractorContainer.oldMouse={x:evt.stageX,y:evt.stageY};
			})
			
			protractor.addEventListener("pressmove",function(evt){
				var o = evt.target;
				protractorContainer.x = evt.stageX + protractorContainer.offset.x;
				protractorContainer.y = evt.stageY + protractorContainer.offset.y;
				//protractorContainer.updateCache();
				//console.log("protractorContainer"+protractorContainer.x)
				//console.log("mouse"+evt.stageX)
				update = true;
			})

			protractor.addEventListener("pressup",function(evt){
				protractorContainer.offsetMouse.x +=protractorContainer.oldMouse.x - evt.stageX;
				protractorContainer.offsetMouse.y +=protractorContainer.oldMouse.y - evt.stageY;
				//console.log("offset"+protractorContainer.offsetMouse.x);
			})


	        //伸缩按钮
	        var changeImg = loader.getResult("change");
			changeBut = new createjs.Shape();
			changeBut.graphics.beginBitmapFill(changeImg).drawRect(0,0,changeImg.width,changeImg.height);
			changeBut.x = protractorImg.width - 210;
			changeBut.y = protractorImg.height - 50 ;
			changeBut.cursor = "pointer";

			changeBut.addEventListener("mousedown",function(evt){
				var o = evt.target;
				o.oldMouseX = evt.stageX;
				o.offset={x:o.x - evt.stageX,y:o.y - evt.stageY};

				update = true;
			})

			changeBut.addEventListener("pressmove",function(evt){
				var o = evt.target;
				var currentX = evt.stageX + o.offset.x;
				var bigOrSmall = evt.stageX > o.oldMouseX ? 0.003 : -0.003;
				//o.x = currentX;
				var scale =1;
				scale += bigOrSmall;

				if(protractorContainer.scaleX<0.7){
					protractorContainer.scaleX=0.7;
					protractorContainer.scaleY=0.7;
					return;
				}
				else if(protractorContainer.scaleX>1.5){
					protractorContainer.scaleX=1.5;
					protractorContainer.scaleY=1.5;
					return;
				}

				protractorContainer.scaleX =  protractorContainer.scaleX * scale;
				protractorContainer.scaleY =  protractorContainer.scaleX * scale;
				protractorContainer.updateCache();
				update = true;
			})

	        //旋转按钮
	        var rotateImg = loader.getResult("rotate");
			rotateBut = new createjs.Shape();
			rotateBut.graphics.beginBitmapFill(rotateImg).drawRect(0,0,rotateImg.width,rotateImg.height);
			rotateBut.x = protractorImg.width - 310;
			rotateBut.y = protractorImg.height - 150;
			rotateBut.cursor = "pointer";

        //var graphics = new createjs.Graphics().beginStroke("black").moveTo(0, protractorImg.height).lineTo(protractorImg.width, protractorImg.height);
        var shape = new createjs.Shape();


        	rotateBut.addEventListener("mousedown",function(evt){
        		oldy = evt.stageY
        		oldx = evt.stageX
        		console.log("x"+evt.stageX)
        		console.log("y"+evt.stageY)
        		console.log("xx"+protractorContainer.x)
        		console.log("rotateBut"+rotateBut.x)
        	})

			constangle1=0
			rotateBut.addEventListener("pressmove",function(evt){
				if (evt.stageY < protractorContainer.y) {
					var angleStatic = Math.atan(88.5/210) * 180 / Math.PI ;
					var angley = evt.stageY - protractorContainer.y;
					angley = -angley;
					var angleDynamic = Math.atan((evt.stageX - protractorContainer.x)/angley) * 180 / Math.PI ;
					angle = angleDynamic -  angleStatic;
					constangle = angle; 
					
					protractorContainer.rotation = angle; 
					update = true;
					console.log(angle)
					console.log("angleDynamic"+angleDynamic)
				}
				else{
					var angleStatic = Math.atan(88.5/210) * 180 / Math.PI ;
					var anglex = evt.stageX - protractorContainer.x;
					var angleDynamic = Math.atan((evt.stageY - protractorContainer.y)/anglex) * 180 / Math.PI ;
					if(constangle>0){
						if(angleDynamic<0){
						angle = constangle + angleDynamic + 180;
						}
						else{
							angle = constangle + angleDynamic;
						}
					}
					else{
						//angle = -constangle - angleDynamic +angleStatic + 90;
					}
					
					
					protractorContainer.rotation = angle; 
					console.log("angleDynamic"+angleDynamic)
					console.log(angle)
					update = true;
				};


				// if (evt.stageY < protractorContainer.y) {
				// 	var angleStatic = Math.atan(88.5/210) * 180 / Math.PI ;
				// 	var angley = evt.stageY - protractorContainer.y;
				// 	angley = -angley;
				// 	var angleDynamic = Math.atan((evt.stageX - protractorContainer.x)/angley) * 180 / Math.PI ;
				// 	angle = angleDynamic -  angleStatic;
				// 	constangle = angle; 
				// 	if(angle<0){
				// 		angle = 360 + angle;
				// 		constangle = 360 + constangle;
				// 	}

				// 	console.log("angle"+ angle)
				// 	console.log("constangle"+ constangle)
				// 	console.log("constangle1:"+ constangle1)
				// 	protractorContainer.rotation = angle; 
				// 	update = true;
				// }

				// else if(evt.stageY > protractorContainer.y && evt.stageX > protractorContainer.x){
				// 	var angleDynamic = Math.atan((evt.stageY - protractorContainer.y)/(evt.stageX - protractorContainer.x)) * 180 / Math.PI ;
				// 	//if(evt.stageX > protractorContainer.x){
				// 	if(constangle > 70){
				// 		angle = constangle + angleDynamic - 180;
				// 	}	
				// 	else{
				// 		angle = constangle + angleDynamic; 
				// 	}
						
						
				// 		protractorContainer.rotation = angle;
				// 	//}
				// 	//else{
				// 		// angle = 180 + constangle + angleDynamic; 
				// 		// console.log(angle)
				// 		// protractorContainer.rotation = angle;	
				// 	//}
				// 	constangle1 = angle;
				// 	console.log("angle"+angle)
				// 	console.log("constangle"+ constangle)
				// 	console.log("constangle1:"+constangle1)
				// 	update = true;
				// }

				// else if(evt.stageY > protractorContainer.y && evt.stageX < protractorContainer.x){
				// 	var angleStatic = Math.atan(88.5/210) * 180 / Math.PI ;
				// 	var angleDynamic1 = Math.atan((oldy - protractorContainer.y)/(protractorContainer.x - oldx)) * 180 / Math.PI ;
				// 	var angleDynamic2 = Math.atan((evt.stageY - protractorContainer.y)/(protractorContainer.x - evt.stageX)) * 180 / Math.PI ;
				// 	var angleDynamic = angleDynamic1 - angleDynamic2
				// 	if(constangle1 == 0){
				// 		if(oldx > protractorContainer.x && oldy < protractorContainer.y){
				// 			angle = constangle1 + angleDynamic + angleStatic + 180 - angleStatic; 
				// 		}
				// 		else{
				// 			// angle = constangle1 + angleDynamic + angleStatic + 270 - angleStatic;
				// 			console.log("asdacasfsg")
				// 		}
				// 	}
						
				// 	else{
				// 		angle = constangle1 + angleDynamic + angleStatic
				// 	}
					
				// 	protractorContainer.rotation = angle;
				// 	update = true;	
				// 	console.log("angleDynamic"+angleDynamic)
				// 	console.log("angle"+angle)
				// 	console.log("constangle"+ constangle)
				// 	console.log("constangle1:"+constangle1)
				// }			

		})


	        //确定按钮
	        var checkImg = loader.getResult("check");
			checkBut = new createjs.Shape();
			checkBut.graphics.beginBitmapFill(checkImg).drawRect(0,0,checkImg.width,checkImg.height);

			checkBut.x = 510 - checkImg.width ;
			checkBut.y = protractorImg.height - 150;
			checkBut.cursor = "pointer";	

			checkBut.addEventListener("mousedown",function(evt){
				if(timer == 1 && angleO1.x){
					// var straightlineShape = new createjs.Shape();
					// straightlineShape.graphics.setStrokeStyle(3);
					// straightlineShape.graphics.beginStroke("green").moveTo(circleShape.x+30, circleShape.y+30).lineTo(protractorContainer.x + protractorContainer.offsetMouse.x, protractorContainer.y-2 +protractorContainer.offsetMouse.y);
					// protractorContainer.addChild(straightlineShape);
					// angleO1.x = circleShape.x+30;
					// angleO1.y = circleShape.y+30;
					var straightlineShape = new createjs.Shape();
					straightlineShape.graphics.setStrokeStyle(3);
					straightlineShape.graphics.beginStroke(color[counter-1]).moveTo(protractorContainer.x + protractorContainer.offsetMouse.x, protractorContainer.y-2 +protractorContainer.offsetMouse.y).lineTo(angleO1.x +protractorContainer.offsetMouse.x, angleO1.y - 2 +protractorContainer.offsetMouse.y);
					straightlineShape.x = protractorContainer.x + protractorContainer.offsetMouse.x;
					straightlineShape.y = protractorContainer.y-2 + protractorContainer.offsetMouse.y;
					straightlineShape.regX = protractorContainer.x + protractorContainer.offsetMouse.x;
					straightlineShape.regY = protractorContainer.y-2 + protractorContainer.offsetMouse.y;
					straightlineShape.rotation=-angle;
					console.log(angle)
					console.log(protractorContainer.x)
					//var numText = new createjs.Text(counter, "20px Arial", color[counter-1]);
						//numText.x = protractorContainer.x + radius;
					// if(angleO1.x > protractorContainer.x){
					// 	numText.x = angleO1.x + 10 + protractorContainer.x + protractorContainer.offsetMouse.x;
					// 	numText.y = angleO1.y - 10 + protractorContainer.y-2 + protractorContainer.offsetMouse.y;


					// 	numText.regX = protractorContainer.x + protractorContainer.offsetMouse.x;
					// 	numText.regY = protractorContainer.y-2 + protractorContainer.offsetMouse.y;
					// }
					// else if(angleO1.x < protractorContainer.x){
					// 	numText.x = angleO1.x - 10 + protractorContainer.x + protractorContainer.offsetMouse.x;
					// 	numText.y = angleO1.y - 20 + protractorContainer.y-2 + protractorContainer.offsetMouse.y;


					// 	numText.regX = protractorContainer.x + protractorContainer.offsetMouse.x;
					// 	numText.regY = protractorContainer.y-2 + protractorContainer.offsetMouse.y;
					// }
					
					// numText.rotation = -angle;
					protractorContainer.addChild(straightlineShape);
					//straightlineShape.cache(0,0,w,h);
					//stage.addChild(straightlineShape);
					timer = 2;
					protractorContainer.updateCache();
					update = true;
				}
				else if(timer == 2 && angleO2.x){	
					// var straightlineShape = new createjs.Shape();
					// straightlineShape.graphics.setStrokeStyle(3);
					// straightlineShape.graphics.beginStroke("green").moveTo(circleShape.x+30, circleShape.y+30).lineTo(protractorContainer.x + protractorContainer.offsetMouse.x, protractorContainer.y-2 +protractorContainer.offsetMouse.y);
					
					// angleO2.x = circleShape.x+30;
					// angleO2.y = circleShape.y+30;
					var straightlineShape = new createjs.Shape();
					straightlineShape.graphics.setStrokeStyle(3);
					straightlineShape.graphics.beginStroke(color[counter-1]).moveTo(angleO2.x +protractorContainer.offsetMouse.x, angleO2.y - 2 +protractorContainer.offsetMouse.y).lineTo(protractorContainer.x + protractorContainer.offsetMouse.x, protractorContainer.y-2 +protractorContainer.offsetMouse.y);
					straightlineShape.x = protractorContainer.x + protractorContainer.offsetMouse.x;;
					straightlineShape.y = protractorContainer.y-2 + protractorContainer.offsetMouse.y;
					straightlineShape.regX = protractorContainer.x + protractorContainer.offsetMouse.x;
					straightlineShape.regY = protractorContainer.y-2 + protractorContainer.offsetMouse.y;
					straightlineShape.rotation=-angle;
					protractorContainer.addChild(straightlineShape);
					timer = 1;
					//if(angleO1.y < protractorContainer.y)
					if(angleO1.x > protractorContainer.x &&
						angleO2.x > protractorContainer.x){
						var angle1 = Math.atan((angleO1.y - protractorContainer.y)/(angleO1.x - protractorContainer.x)) * 180 / Math.PI;
						var angle2 = Math.atan((angleO2.y - protractorContainer.y)/(angleO2.x - protractorContainer.x)) * 180 / Math.PI;

						var angle3 = angle1 - angle2;
						if(angle3 <0){
							angle3 = -angle3;
						}

						angle3 = angle3.toFixed(0);
					
						var angleText = new createjs.Text(counter+". "+angle3+"°", "20px Arial", color[counter-1]);
						angleText.y = (counter-1) * 20;
						//var numText = new createjs.Text(counter, "20px Arial", "green");
						//numText.x = protractorContainer.x + radius;
						//numText.x = angleO2.x;
						//numText.y = angleO2.y;
						angleText.y = (counter-1) * 20;
						counter++;
						//var arcShape = new createjs.Shape();
						//var straightline = new createjs.Graphics();
						// straightline.setStrokeStyle(3);
						// straightline.beginStroke("red").arc(protractorContainer.x + protractorContainer.offsetMouse.x,protractorContainer.y - 2 + protractorContainer.offsetMouse.y, radius , (-angle1)/180*Math.PI ,(angle2)/180*Math.PI,true);
	     //        		var arcShape = new createjs.Shape(straightline);
	            		console.log(1)

					}
					else if(angleO1.x > protractorContainer.x &&
						angleO2.x < protractorContainer.x){
						var angle1 = Math.atan((angleO1.y - protractorContainer.y)/(angleO1.x - protractorContainer.x)) * 180 / Math.PI;
						var angle2 = Math.atan((angleO2.y - protractorContainer.y)/(angleO2.x - protractorContainer.x)) * 180 / Math.PI;
						if(angle1 >0 && angle2 >0){
							var angle3 = 180 - angle2 + angle1;
						}
						else if(angle1<0 && angle2>0){
							var angle3 = 180 - angle2 + angle1;
						}
						else if(angle1 < 0 && angle2 <0){
							angle3 = 180 - angle2 + angle1;
						}
						else{
							angle3 = 180 + angle2 - angle1;
						}
						angle3 = angle3.toFixed(0);
						var angleText = new createjs.Text(counter+". "+angle3+"°", "20px Arial", color[counter-1]);
						angleText.y = (counter-1) * 20;
						//var numText = new createjs.Text(counter, "20px Arial", color[counter-1]);
						//numText.x = protractorContainer.x + radius;
						//numText.x = angleO2.x;
						//numText.y = angleO2.y - 20;
						angleText.y = (counter-1) * 20;
						counter++;
						console.log(2)
					}
					else if(angleO1.x < protractorContainer.x && angleO2.x > protractorContainer.x){
						var angle1 = Math.atan((angleO1.y - protractorContainer.y)/(angleO1.x - protractorContainer.x)) * 180 / Math.PI;
						var angle2 = Math.atan((angleO2.y - protractorContainer.y)/(angleO2.x - protractorContainer.x)) * 180 / Math.PI;
						
						if(angle1>0 && angle2<0){
							var angle3 = 180 + angle2 - angle1
						}
						else if(angle1>0 && angle2>0){
							var angle3 = 180 + angle2 - angle1
						}
						else if(angle1<0 && angle2<0){
							var angle3 = 180 + angle2 - angle1
						}
						else{
							var angle3 = 180 - angle2 + angle1
						}

						angle3 = angle3.toFixed(0);
						var angleText = new createjs.Text(counter+". "+angle3+"°", "20px Arial", color[counter-1]);
						angleText.y = (counter-1) * 20;
						//var numText = new createjs.Text(counter, "20px Arial", "green");
						//numText.x = protractorContainer.x + radius;
						//numText.x = angleO2.x;
						//numText.y = angleO2.y - 20;
						angleText.y = (counter-1) * 20;
						counter++;
						console.log(3)
					}
					else if(angleO1.x < protractorContainer.x &&
						angleO2.x < protractorContainer.x){
						var angle1 = Math.atan((angleO1.y - protractorContainer.y)/(angleO1.x - protractorContainer.x)) * 180 / Math.PI;
						var angle2 = Math.atan((angleO2.y - protractorContainer.y)/(angleO2.x - protractorContainer.x)) * 180 / Math.PI;
						var angle3 = angle2 - angle1;
						if(angle3 < 0){
							angle3 = -angle3;
						}
						angle3 = angle3.toFixed(0);
						var angleText = new createjs.Text(counter+". "+angle3+"°", "20px Arial", color[counter-1]);
						angleText.y = (counter-1) * 20;
						//var numText = new createjs.Text(counter, "20px Arial", "green");
						//numText.x = protractorContainer.x + radius;
						//numText.x = angleO2.x;
						//numText.y = angleO2.y - 20;
						angleText.y = (counter-1) * 20;
						counter++;
						console.log(4)
					}
					console.log(angle1)
					console.log(angle2)
					console.log(angle3)

					
            		radius += 20;
					protractorContainer.addChild(straightlineShape);
					//straightlineShape.cache(0,0,w,h)
					stage.addChild(angleText);
					protractorContainer.updateCache();
					update = true;
				}
			})

	        //删除按钮
	        var delImg = loader.getResult("del");
			delBut = new createjs.Shape();
			delBut.graphics.beginBitmapFill(delImg).drawRect(0,0,delImg.width,delImg.height);

			delBut.x = 410 - delImg.width;
			delBut.y = protractorImg.height - 50;
			delBut.cursor = "pointer";



			//整个量角器的容器
			protractorContainer = new createjs.Container();
       		
       		protractorContainer.x = protractorImg.width/2 + 100;
       		protractorContainer.y = protractorImg.height + 100;
       		protractorContainer.regX = protractorImg.width/2 + 100;
			protractorContainer.regY = protractorImg.height + 100;
			protractorContainer.offsetMouse={x:0,y:0};
			//量角直线
			var straightline = new createjs.Graphics();
			straightline.setStrokeStyle(3);
			straightline.beginStroke("red").moveTo(protractorContainer.x , protractorContainer.y-2 ).lineTo(protractorContainer.x  + protractorImg.width/2 - 20, protractorContainer.y  - 2);
			
            var straightlineShape = new createjs.Shape(straightline);

            //直线上的圆
            var circle = new createjs.Graphics();
            circle.setStrokeStyle(3);
            circle.beginStroke("red").beginFill("white").drawCircle(30,30,20)
            var circleShape = new createjs.Shape(circle);
            circleShape.x = protractorContainer.x + protractorImg.width/2 - 50;
            circleShape.y = protractorContainer.y - 30;
            circleShape.cursor="pointer";
            circleShape.cache(0,0,w,h)

            circleShape.addEventListener("mousedown",function(evt){
            	var o = evt.target;
            	o.offset = {x:o.x - evt.stageX, y:o.y - evt.stageY}
            	console.log(o.x)
            	console.log(o.offset.x)
console.log("protractorContainer"+protractorContainer.x)
				console.log("mouse"+evt.stageX)
				//angleO1 = {x:evt.stageX,y:evt.stageY};
            	update=true;
            })

            circleShape.addEventListener("pressmove",function(evt){
				circleContainer.x = protractorContainer.x + protractorContainer.offsetMouse.x;;
				circleContainer.y = protractorContainer.y-2 + protractorContainer.offsetMouse.y;
				circleContainer.regX = protractorContainer.x + protractorContainer.offsetMouse.x;
				circleContainer.regY = protractorContainer.y-2 + protractorContainer.offsetMouse.y;
            	if (evt.stageX > protractorContainer.x) {
					var R = Math.atan((evt.stageY - protractorContainer.y)/(evt.stageX - protractorContainer.x));
					angleCir = R * 180 / Math.PI - angle; 
					circleContainer.rotation = angleCir; 
					circleContainer.updateCache();
					update = true;
				
				}
				else{
					var R = Math.atan((protractorContainer.y - evt.stageY)/(protractorContainer.x - evt.stageX))
					angleCir = 180 + R * 180 / Math.PI - angle; 
					circleContainer.rotation = angleCir;

					update = true;
				};
				circleContainer.rotation = angleCir;

				// var o = evt.target;
				// o.x = (evt.stageX + o.offset.x)//*protractorContainer.scaleX;
				// o.y = (evt.stageY + o.offset.y)//*protractorContainer.scaleY;
				// circleContainer.removeChildAt(0);
				// var straightlineShape = new createjs.Shape();
				// straightlineShape.graphics.setStrokeStyle(3);
				// straightlineShape.graphics.beginStroke("red").moveTo(o.x+30, o.y+30).lineTo(protractorContainer.x + protractorContainer.offsetMouse.x, protractorContainer.y-2 +protractorContainer.offsetMouse.y);
				
				// circleContainer.addChildAt(straightlineShape,0);
				//var o = evt.target;
				//currentx = (evt.stageX + o.offset.x)//*protractorContainer.scaleX;
				//currenty = (evt.stageY + o.offset.y)//*protractorContainer.scaleY;
				//console.log("currentx"+currentx+"mousex"+evt.stageX)
				circleContainer.updateCache();
				protractorContainer.updateCache();
				update = true;
				console.log("offset"+protractorContainer.offsetMouse.x);
            })

            circleShape.addEventListener("pressup",function(evt){
            	if(timer == 1){
            		angleO1 = {x:evt.stageX,y:evt.stageY}
            	}
            	else{
            		angleO2 = {x:evt.stageX,y:evt.stageY}
            	}
            	
            })

            //直线和圆的容器
			circleContainer = new createjs.Container();
			circleContainer.addChild(straightlineShape,circleShape);
			circleContainer.cache(0,0,w,h);
			protractorContainer.addChild(rect,protractor,changeBut,rotateBut,checkBut,delBut,circleContainer);
       		//protractorContainer.removeChildAt(1);
       		protractorContainer.cache(0,0,w,h);

            createjs.Touch.enable(stage);
	        createjs.Ticker.addEventListener("tick", tick);
	        stage.addChild(protractorContainer);
    	}

	    function tick(event) {
			// this set makes it so the stage only re-renders when an event handler indicates a change has happened.
			if (update) {
				update = false; // only update once
				stage.update(event);
			}
		}

	</script>
</head>
<body onload="init();">
	<div>
		<canvas id="protractor" width="1200" height="1200" style="background: white"></canvas>
	</div>
</body>
</html>